.finding-card-wrapper {
  display: flex;
  align-items: center;
  height: 25px;
  color: white;
  padding-left: 22px;
  margin: 0 2px;
  border-radius: 5px;
  justify-content: space-between;

  &.open {
    background: $gray-6;
    box-shadow: 0 1px 2px -1px $gray-9, 0 -1px 2px -1px $gray-9;

    &:hover,
    &:nth-last-child(odd) {
      background: $gray-6;
    }

    .program .mono {
      font-weight: 700;
    }
  }

  &:nth-last-child(odd) {
    background: transparentize(white, 0.98);
  }

  .gutter-button-style {
    opacity: 0;
    position: relative;
  }

  &:hover .gutter-button-style {
    opacity: 1;
  }

  &:hover {
    background-color: $white-3;
  }

  &:active {
    background: transparentize(white, 0.94);
  }

  .expand-button {
    left: 5px;
    top: $space-xs;
  }

  .remove-button {
    background-color: $white-9;
    stroke-width: 3px;
    right: 6px;

    &:hover {
      background-color: $gray-1;
    }
  }
}

.finding-card {
  color: $gray-5;
  user-select: none;
  transition: background 150ms;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 90%;

  .program {
    display: flex;
    margin-left: 6px;
    color: $aqua;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    p {
      @include label-small;
      display: inline-block;
      padding: 2px 4px;
      margin: 0 2px;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .pin {
    color: $white-1;
    background: $green;
    border-radius: 3px;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
  }

  .footer {
    color: $white-8;
    display: flex;

    .stats {
      margin-right: $space-xxs;
      font-size: 9px;
    }
  }

  .warning-body {
    display: flex;
    align-items: center;

    svg {
      fill: $yellow;
      height: 11px;
      width: 11px;
      margin-right: 12px;
      margin-bottom: 3px;
    }
  }
}
